<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>肥猪</title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
				background-repeat: no-repeat;
				background-size: 100%;
				box-sizing: border-box;
			}

			body,
			html {
				width: 100vw;
				height: 100vh;
			}

			.box {
				width: 100vw;
				padding-bottom: 1vh;
				background-color: rgba(164, 240, 0, 0.5);
				position: absolute;
				bottom: 0px;
			}

			.box-title {
				position: absolute;
				width: 100vw;
				height: 35.733vw;
				
				top: -22vw;
				object-fit: 100%;
			}


			.close-botton {
				width: 10vw;
				height: 10vw;
				background-image: url("bluck/cjyy_icon_tc_gb.png");
				position: absolute;
				right: 2vw;
				top: -15vw;
				
			}

			.box-content {
				width: 95vw;
				background-color: antiquewhite;
				margin: auto;
				display: flex;
				flex-direction: column;
				border-radius: 3vw;
			}

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0px 2vw;
			}

			.elem-list {
				overflow-y: scroll;
				white-space: nowrap;
			}
			.elem-list::-webkit-scrollbar{
				display: none;
			}

			.elem {
				font-size: 4vw;
				text-align: center;
				margin:0px 2vw ;
				
				display: inline-block;
				white-space: nowrap;
				
			}

			.elem>img {
				width: 20vw;
				height: 20vw;
				object-fit: 100%;
				background-image: url("bluck/cjyy_tc_lwk_bg.png");
			}

			.elem>.content_text {
				color: gold;
			}

			.content_text>img {
				width: 3vw;
				height: 3vw;
			}
		</style>
	</head>
	<body>

		<div class="box">
			<img class="box-title" src="bluck/cjyy_xdtc_bt_gxyydkz.png">
			<div class="close-botton"></div>

			<div class="box-content" style="margin: 5vh auto 1vh auto;">
				<div class="title" style="font-size: 2.5vw;">
					<div style="font-size: 5vw">圈1次</div>
					<div>4.16&nbsp;&nbsp23.56</div>
				</div>
				<div class="elem-list">
					<div class="elem">
						<img src="肥猪1.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
					<div class="elem">
						<img src="肥猪1.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
					<div class="elem">
						<img src="肥猪1.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
					<div class="elem">
						<img src="肥猪1.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
					<div class="elem">
						<img src="肥猪2.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
					<div class="elem">
						<img src="肥猪1.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
					<div class="elem">
						<img src="肥猪1.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
					<div class="elem">
						<img src="肥猪1.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
					<div class="elem">
						<img src="肥猪2.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
				</div>
			</div>
			<div class="box-content" ">
				<div class="title">
					<div style="font-size:5vw">圈6次</div>
					<div style="font-size: 2.5vw;">4.16&nbsp;&nbsp23.56</div>
				</div>
				<div class="elem-list">
					<div class="elem">
						<img src="肥猪1.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
					<div class="elem">
						<img src="肥猪2.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
					<div class="elem">
						<img src="肥猪1.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
					<div class="elem">
						<img src="肥猪2.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
					<div class="elem">
						<img src="肥猪2.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
					<div class="elem">
						<img src="肥猪2.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
					<div class="elem">
						<img src="肥猪1.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
					<div class="elem">
						<img src="肥猪1.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
					<div class="elem">
						<img src="肥猪1.gif" alt="">
						<div>正宗大肥猪</div>
						<div class="content_text"><img src="bluck/cjyy_icon_jb.png" alt="">333</div>
					</div>
				</div>
			</div>
		</div>

	</body>

</html>